<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="2" id="selextTitle">${网页标题 }</title>
<meta name="keywords" content="${网页关键词}">
<meta name="description" content="${网页描述 }" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<link
	href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css"
	rel="stylesheet" type="text/css">
<link
	href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css"
	rel="stylesheet" type="text/css" />
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet"
	type="text/css">
<link rel="shortcut icon" href="${浏览器logo }">
<style>
.details {
	padding: 60px 0 180px;
	background: #f9f9f9;
}

.details h3 {
	margin-bottom: 20px;
	font-size: 22px;
}
/*.details .carousel-inner{width:100%;height: 430px;overflow: hidden}
        .details .img-wrap img{width: 100%;max-height: 100%;}
        .details .tit{font-size: 16px;color: #000000;}
        .details .line{height: 1px;width: 80px;background: #cbcbcb;margin: 15px 0 0;display: block;}
        .details .abstract{line-height: 22px;letter-spacing: 1px;padding-bottom: 12px;padding-top: 25px;}
        .carousel-indicators{bottom: -140px;width: 100%;margin: 0px auto;left:0;}
        .carousel-indicators li{margin-right:15px;background-repeat: no-repeat;   background-size: cover;
            height: 99px;  width: 150px;  border-radius: 0;}
        .carousel-indicators li.active{margin-right:15px;background-repeat: no-repeat;background-size: cover;
            height: 99px;  width: 150px;border: 2px solid #39325e;box-sizing: content-box}*/
.jssora05l, .jssora05r {
	display: block;
	position: absolute;
	/* size of arrow element */
	width: 40px;
	height: 40px;
	cursor: pointer;
	background: url('${path}/resource/images/a17.png') no-repeat;
	overflow: hidden;
}

.jssora05l {
	background-position: -10px -40px;
}

.jssora05r {
	background-position: -70px -40px;
}

.jssora05l:hover {
	background-position: -130px -40px;
}

.jssora05r:hover {
	background-position: -190px -40px;
}

.jssora05l.jssora05ldn {
	background-position: -250px -40px;
}

.jssora05r.jssora05rdn {
	background-position: -310px -40px;
}

.jssora05l.jssora05lds {
	background-position: -10px -40px;
	opacity: .3;
	pointer-events: none;
}

.jssora05r.jssora05rds {
	background-position: -70px -40px;
	opacity: .3;
	pointer-events: none;
}
/* jssor slider thumbnail navigator skin 01 css */
/*.jssort01 .p            (normal).jssort01 .p:hover      (normal mouseover).jssort01 .p.pav        (active).jssort01 .p.pdn        (mousedown)*/
.jssort01 .p {
	position: absolute;
	top: 0;
	left: 0;
	width: 72px;
	height: 72px;
}

.jssort01 .t {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.jssort01 .w {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.jssort01 .c {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 68px;
	height: 68px;
	border: #FFFFFF 2px solid;
	box-sizing: content-box;
	_background: none;
}

.jssort01 .pav .c {
	top: 0px;
	_top: 0px;
	left: 0px;
	_left: 0px;
	width: 68px;
	height: 68px;
	border: #39325e 2px solid;
	_border: #fff 2px solid;
	background-position: 50% 50%;
}

.jssort01 .p:hover .c {
	top: 0px;
	left: 0px;
	width: 68px;
	height: 68px;
	border: #39325e 2px solid;
	background-position: 50% 50%;
}

.jssort01 .p.pdn .c {
	background-position: 50% 50%;
	width: 68px;
	height: 68px;
	border: #000 2px solid;
}

* html .jssort01 .c, * html .jssort01 .pdn .c, * html .jssort01 .pav .c
	{ /* ie quirks mode adjust */
	width /**/: 72px;
	height /**/: 72px;
}

.details .txt {
	margin-top: 20px;
}
.details{overflow-x:hidden;}
@media screen and (max-width: 768px){
	.details{padding:25px 0 30px}
}
</style>


</head>
<body class="">
	<jsp:include page="_top.jsp"></jsp:include>
	<cms:art var="art" id="${param.id}"></cms:art>
	<div class="details">
		<div class="container">
			<h3 class="text-center">${art.artTitle }</h3>
			<div class="row">
				<div class="col-md-12" style="padding:0">


					<div id="jssor_1"
						style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 800px; height: 456px; overflow: hidden; visibility: hidden; background-color: #24262e;">
						<div data-u="slides"
							style="cursor: default; position: relative; top: 0px; left: 0px; width: 800px; height: 356px; overflow: hidden;">

							<c:forEach items="${art.images }" var="item" varStatus="count">

								<div data-p="144.50">
									<img data-u="image" src="${item.path }" /> <img data-u="thumb"
										src="${item.path }" />
								</div>

							</c:forEach>
							<a data-u="any" href="#" style="display: none">Image Gallery</a>
						</div>
						<!-- Thumbnail Navigator -->
						<div data-u="thumbnavigator" class="jssort01"
							style="background: #f9f9f9; position: absolute; left: 0px; bottom: 0px; width: 800px; height: 100px;"
							data-autocenter="1">
							<!-- Thumbnail Item Skin Begin -->
							<div data-u="slides" style="cursor: default;">
								<div data-u="prototype" class="p">
									<div class="w">
										<div data-u="thumbnailtemplate" class="t"></div>
									</div>
									<div class="c"></div>
								</div>
							</div>
							<!-- Thumbnail Item Skin End -->
						</div>
						<!-- Arrow Navigator -->
						<span data-u="arrowleft" class="jssora05l"
							style="top: 158px; left: 8px; width: 40px; height: 40px;"></span>
						<span data-u="arrowright" class="jssora05r"
							style="top: 158px; right: 8px; width: 40px; height: 40px;"></span>
					</div>

				</div>
				<div class="col-md-10 col-md-offset-1 txt">
					<div class="border abstract">${art.artContent }</div>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="_foot.jsp"></jsp:include>
</body>
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/AjaxProxy.js"></script>
<script type="text/javascript"
	src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="${path }/resource/js/plugin/jssor.slider-21.1.6.mini.js"
	type="text/javascript"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {

		var jssor_1_SlideshowTransitions = [ {
			$Duration : 1200,
			x : 0.3,
			$During : {
				$Left : [ 0.3, 0.7 ]
			},
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			x : -0.3,
			$SlideOut : true,
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			x : -0.3,
			$During : {
				$Left : [ 0.3, 0.7 ]
			},
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			x : 0.3,
			$SlideOut : true,
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			y : 0.3,
			$During : {
				$Top : [ 0.3, 0.7 ]
			},
			$Easing : {
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			y : -0.3,
			$SlideOut : true,
			$Easing : {
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			y : -0.3,
			$During : {
				$Top : [ 0.3, 0.7 ]
			},
			$Easing : {
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			y : 0.3,
			$SlideOut : true,
			$Easing : {
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			x : 0.3,
			$Cols : 2,
			$During : {
				$Left : [ 0.3, 0.7 ]
			},
			$ChessMode : {
				$Column : 3
			},
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			x : 0.3,
			$Cols : 2,
			$SlideOut : true,
			$ChessMode : {
				$Column : 3
			},
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			y : 0.3,
			$Rows : 2,
			$During : {
				$Top : [ 0.3, 0.7 ]
			},
			$ChessMode : {
				$Row : 12
			},
			$Easing : {
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			y : 0.3,
			$Rows : 2,
			$SlideOut : true,
			$ChessMode : {
				$Row : 12
			},
			$Easing : {
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			y : 0.3,
			$Cols : 2,
			$During : {
				$Top : [ 0.3, 0.7 ]
			},
			$ChessMode : {
				$Column : 12
			},
			$Easing : {
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			y : -0.3,
			$Cols : 2,
			$SlideOut : true,
			$ChessMode : {
				$Column : 12
			},
			$Easing : {
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			x : 0.3,
			$Rows : 2,
			$During : {
				$Left : [ 0.3, 0.7 ]
			},
			$ChessMode : {
				$Row : 3
			},
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			x : -0.3,
			$Rows : 2,
			$SlideOut : true,
			$ChessMode : {
				$Row : 3
			},
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			x : 0.3,
			y : 0.3,
			$Cols : 2,
			$Rows : 2,
			$During : {
				$Left : [ 0.3, 0.7 ],
				$Top : [ 0.3, 0.7 ]
			},
			$ChessMode : {
				$Column : 3,
				$Row : 12
			},
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			x : 0.3,
			y : 0.3,
			$Cols : 2,
			$Rows : 2,
			$During : {
				$Left : [ 0.3, 0.7 ],
				$Top : [ 0.3, 0.7 ]
			},
			$SlideOut : true,
			$ChessMode : {
				$Column : 3,
				$Row : 12
			},
			$Easing : {
				$Left : $Jease$.$InCubic,
				$Top : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			$Delay : 20,
			$Clip : 3,
			$Assembly : 260,
			$Easing : {
				$Clip : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			$Delay : 20,
			$Clip : 3,
			$SlideOut : true,
			$Assembly : 260,
			$Easing : {
				$Clip : $Jease$.$OutCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			$Delay : 20,
			$Clip : 12,
			$Assembly : 260,
			$Easing : {
				$Clip : $Jease$.$InCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		}, {
			$Duration : 1200,
			$Delay : 20,
			$Clip : 12,
			$SlideOut : true,
			$Assembly : 260,
			$Easing : {
				$Clip : $Jease$.$OutCubic,
				$Opacity : $Jease$.$Linear
			},
			$Opacity : 2
		} ];

		var jssor_1_options = {
			$AutoPlay : true,
			$SlideshowOptions : {
				$Class : $JssorSlideshowRunner$,
				$Transitions : jssor_1_SlideshowTransitions,
				$TransitionsOrder : 1
			},
			$ArrowNavigatorOptions : {
				$Class : $JssorArrowNavigator$
			},
			$ThumbnailNavigatorOptions : {
				$Class : $JssorThumbnailNavigator$,
				$Cols : 10,
				$SpacingX : 8,
				$SpacingY : 8,
				$Align : 360
			}
		};

		var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

		/*responsive code begin*/
		/*you can remove responsive code if you don't want the slider scales while window resizing*/
		function ScaleSlider() {
			var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
			if (refSize) {
				refSize = Math.min(refSize, 800);
				jssor_1_slider.$ScaleWidth(refSize);
			} else {
				window.setTimeout(ScaleSlider, 30);
			}
		}
		ScaleSlider();
		$(window).bind("load", ScaleSlider);
		$(window).bind("resize", ScaleSlider);
		$(window).bind("orientationchange", ScaleSlider);
		/*responsive code end*/
	});
	$(".carousel-inner .item").eq(0).addClass("active");
	$(".carousel-indicators li").eq(0).addClass("active")
	$(".carousel-indicators li").each(function(index) {
		var src = $(".carousel-inner .item img").eq(index).attr("src");
		$(this).css("background-image", "url(" + src + ")");
	})
	$(".suspend").mouseover(function() {
		$(this).stop();
		$(this).animate({
			width : 156
		}, 400);
	});
	$(".suspend").mouseout(function() {
		$(this).stop();
		$(this).animate({
			width : 36
		}, 400);
	});
</script>
</body>
</html>
